<template>
  <div class="common-warp wh100 warp-bg">
    <Search @onSearch="handleSearch" :searchOptions="state.data.searchOptions" @change="handleChange" />
    <List ref="myTable" v-bind="state.data" @edit="handleEdit" @del="handleDel">
    </List>
    <Add @add="handleAdd" />
    <DelDialog ref="delDialogRef" @del="handleDialogDel" />
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, } from 'vue';
import List from '@/components/list/index.vue';
import Add from '@/components/add/index.vue';
import Search from '@/components/search/index.vue';
import DelDialog from '@/components/delDialog/index.vue';
import { usePosDeviceDeleteApi, usePosDevicePageApi } from "@/api/index"
import { useRouter } from 'vue-router'
import type { DevPageItem } from "@/types/pos/dev/index";
import wx from "weixin-js-sdk";
import { message } from 'ant-design-vue';
import { useUrlParams } from "@/hooks/useUrlParams";
const { data } = useUrlParams()
const router = useRouter()
const delDialogRef = ref();

const state = reactive({
  data: {
    list: [] as DevPageItem[],
    config: {
      total: 0,         // 列表总数
      edit: true,
      del: true,
      othenBtnOne: false,
      othenBtnTwo: false,

      submit: false,
      title: 'name',
      subtitle: 'code',
      // layout: 'vertical'//开启垂直排列
    },
    params: {
      pageNum: 1,
      pageSize: 10,
    },
    searchOptions: [
      { label: '序列号', value: 'code' },
      { label: '名称', value: 'name' }
    ],
  },
  showDialog: false,
})

const getData = async () => {
  let { data: { pageNum, pageSize, total, list } } = await usePosDevicePageApi(state.data.params)
  state.data.list = list || []
  state.data.params.pageSize = pageSize
  state.data.params.pageNum = pageNum
  state.data.config.total = total
}


const handleSearch = ({ selectValue, inputValue }: any) => {
  let conditions = {} as any
  conditions[selectValue] = inputValue
  state.data.params = Object.assign({}, state.data.params, conditions);
  getData()
}
const handleChange = () => {
  state.data.params = {
    pageNum: 1,
    pageSize: 10,
  }
}

// 新增设备
const handleAdd = () => {
  router.push({ name: 'PosAddDev' })
}

// 编辑设备信息
const handleEdit = ({ code }: DevPageItem) => {
  router.push({
    name: "PosEditDev",
    query: {
      code
    }
  })
}

// 打开删除弹窗
const handleDel = (row: DevPageItem) => {
  delDialogRef.value.openDialog(row)
}
// 确认删除
const handleDialogDel = async ({ code }: DevPageItem) => {
  await usePosDeviceDeleteApi({ code })
  message.success("操作成功", 2);
  getData()
}

onMounted(() => {
  document.title = '消费设备'
  getData()
})

</script>
<style scoped lang='less'></style>